<template>
	<div class="root">
		<!-- <h1>我是APP组件</h1> -->
		<Demo/>
		<Message/>
		<Ref/>
		<Reactive/>
		<ToRef/>
		<ToRefs/>
		<VBind/>
		<VModel/>
		<VIf/>
		<VShow/>
		<VFor/>
		<VFor2/>
		<VFor3/>
	</div>
</template>


<script setup>
	import Demo from './components/Demo.vue'
	import Message from './components/Message.vue'
	import Ref from './components/Ref.vue'
	import Reactive from './components/Reactive.vue'
	import ToRef from './components/ToRef.vue'
	import ToRefs from './components/ToRefs.vue'
	import VBind from './components/VBind.vue'
	import VModel from './components/VModel.vue'
	import VIf from './components/VIf.vue'
	import VShow from './components/VShow.vue'
	import VFor from './components/VFor.vue'
	import VFor2 from './components/VFor2.vue'
	import VFor3 from './components/VFor3.vue'
</script>



<style scoped>
 .root {
	 height: 100%;
	 width: 100%;
	 background-color: khaki;
	 display: flex;
	 justify-content: space-around;
	 flex-wrap: wrap;
 }
</style>
